<template>
    <div id="register">
        <el-form :model="registerForm" :rules="rules" ref="registerForm">
            <el-form-item prop="phoneNum">
                <div :class="['code-container',{'error':isError}]">
                    <el-input @focus="focus" placeholder="输入手机号" v-model="registerForm.phoneNum"></el-input>
                    <div class="get-code tips" @click="getCode" v-if="!codeShow">获取验证码</div>
                    <div class="code-second" v-if="codeShow">{{codeSecond}}秒</div>
                </div>
            </el-form-item>
            <el-form-item prop="code">
                <el-input placeholder="输入验证码" v-model="registerForm.code"></el-input>
            </el-form-item>
            <el-form-item prop="pwd">
                <el-input type="password" placeholder="输入密码" v-model="registerForm.pwd" show-password @keyup.native.enter="register"></el-input>
            </el-form-item>
            <button :class="['dis-button','register-btn' ,{'use-btn':disbtn}]" type="button" :disabled="!disbtn" @click.prevent="register">{{submitBtn}}</button>
        </el-form>
        <div class="user-agreement s-14" v-if="submitBtn==='注册'">注册代表您已阅读并同意<span @click="showUserAgreement = true">《美丽科学用户许可协议》</span></div>
        <user-agreement v-if="showUserAgreement" :showUserAgreement.sync="showUserAgreement"></user-agreement>
    </div>
</template>

<script>
import user from '@/content/api/user'
import userAgreement from './userAgreement'
export default {
    components:{userAgreement},
    props: {
        submitBtn: {
            type: String,
            default: '注册'
        }
    },
    data() {
        let phoeNum = (rule, value, callback) => {
            let rex = new RegExp(/^1\d{10}$/g)
            if (rex.test(value)) {
                this.isError = false
                return callback()
            } else {
                this.isError = true
                return callback(new Error('手机号输入错误'))
            }
        }
        return {
            registerForm: {
                phoneNum: null,
                code: null,
                pwd: null,
            },
            rules: { phoneNum: [{ validator: phoeNum, trigger: 'submit' }] },
            isclick: false,
            isError: false,
            codeSecond: 60,
            codeShow: false,
            secondInterval: null,
            showUserAgreement:false
        }
    },
    computed: {
        disbtn() {
            return !!(this.registerForm.phoneNum && this.registerForm.code && this.registerForm.pwd)
        }
    },
    methods: {
        register() {
            let _this = this;
            this.$refs.registerForm.validate(valid => {
                if (valid) {
                    if (_this.submitBtn === "注册") {
                        const params = {
                            mobile: _this.registerForm.phoneNum,
                            registerCode: _this.registerForm.code,
                            password: _this.registerForm.pwd
                        }
                        console.log("开始调用注册接口")
                        user.register(params).then(res => {
                            if (res.code == "0") {
                                _this.$emit("loginByAccount", { loginName: _this.registerForm.phoneNum, password: _this.registerForm.pwd })
                            } else {
                                _this.$message.error(res.message);
                            }
                        }).catch(err => {
                            _this.$message.error("注册失败！");
                        })
                    } else if (_this.submitBtn === "找回密码") {
                        const params = {
                            mobile: _this.registerForm.phoneNum,
                            msgCode: _this.registerForm.code,
                            password: _this.registerForm.pwd
                        }
                        user.forgetPassword(params).then(res => {
                            if (res.code == "0") {
                                _this.$message({
                                    message: '密码修改成功！',
                                    type: 'success'
                                });
                                _this.$emit("changeRegister", 0);
                            } else {
                                _this.$message.error(res.message);
                            }
                        }).catch(err => {
                            _this.$message.error("注册失败！");
                        })
                    }
                } else {
                    this.isclick = true
                }
            })
        },
        getCode() {
            let _this = this
            const params = {
                mobile: _this.registerForm.phoneNum
            }
            user.pushShortMessage(params).then(res => {
                if (res.code == "0") {
                    _this.codeShow = true;
                    _this.$message.success('验证码已发送')
                    _this.codeSecond = 60;
                    _this.secondInterval = setInterval(function () {
                        _this.codeSecond = _this.codeSecond - 1;
                        if (_this.codeSecond === 0) {
                            clearInterval(_this.secondInterval);
                            _this.codeShow = false;
                        }
                    }, 1000);
                } else {
                    _this.$message.warning(res.message);
                }
            }).catch(err => {
                _this.message.error("发送验证码失败！");
            })
        },
        focus() {
            console.log(this.isclick)
            if (!this.isclick) return
            console.log(111)
            this.isError = false
            this.$refs.registerForm.clearValidate()
        },
        destroyed() {
            if (this.secondInterval) {
                clearInterval(this.secondInterval);
            }
        }
    }
}
</script>

<style lang="scss">
#register {
    .code-container {
        position: relative;
        .el-input__inner {
            padding-right: 60px;
        }
    }
    .get-code {
        position: absolute;
        right: 19px;
        top: 0;
    }
    .register-btn {
        width: 360px;
        height: 48px;
        margin-top: 24px;
    }
    .code-second {
        position: absolute;
        right: 19px;
        top: 0;
        font-size: 16px;
        font-weight: 400;
        height: 17px;
        color: rgba(96, 98, 102, 1);
        line-height: 40px;
    }
    .user-agreement {
        color: #909399;
        text-align: center;
        margin-top: 10px;
        span {
            color: #4894ff;
            cursor: pointer;
            text-decoration: underline;
            text-decoration-color: #4894ff;
        }
    }
}
</style>
